<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>员工管理系统</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/main.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-info flex-md-nowrap p-0">
    <span class="navbar-brand col-sm-3 col-md-2  mr-0" href="#">
        <img src="${pageContext.request.contextPath}/static/img/1.svg" width="25px" height="22px" style="margin-bottom: 4px" alt="">
        &nbsp;&nbsp;${pageContext.session.getAttribute("Name")}
    </span>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="/logout">登出</a>
        </li>
    </ul>
</nav>
<div class="container-fluid">
    <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="/myInfo/${pageContext.session.getAttribute("Eid")}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                <polyline points="9 22 9 12 15 12 15 22"></polyline>
                            </svg>
                            个人信息
                        </a>
                    </li>
                    <c:if test="${pageContext.session.getAttribute('Role')=='管理员'}">
                        <li class="nav-item">
                            <a class="nav-link" href="/toMain">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                                员工信息
                            </a>
                        </li>
                    </c:if>
                    <c:if test="${pageContext.session.getAttribute('Role')=='管理员'}">
                        <li class="nav-item">
                            <a class="nav-link" href="/attendance">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="16" y1="13" x2="8" y2="13"></line>
                                    <line x1="16" y1="17" x2="8" y2="17"></line>
                                    <polyline points="10 9 9 9 8 9"></polyline>
                                </svg>
                                员工出勤
                            </a>
                        </li>
                    </c:if>
                </ul>
            </div>
        </nav>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h2 style="border-bottom:3px solid #a0a4a0;margin-bottom: 30px;padding-left: 450px">个人信息管理</h2>
            <div class="card">
                <div class="row card-body">
                    <div class="col-5" style="margin-left: 30px">
                        <form action="/updateEmployee2" role="form" method="post" enctype="multipart/form-data" >
                            <div class="card">
                                <img src="${pageContext.request.contextPath}/static/img/${employee.photo}" width="80px" height="80px" style="margin-top:10px;margin-left:39%;border: 3px solid darkgrey">
                                <label for="img" class="btn btn-secondary btn-sm" style="width:80px;margin-top:5px; margin-left:39%;">更换头像</label>
                                <input type="file" id="img" name="img" style="display: none">
                                <div class="card-body">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">工号</span>
                                        </div>
                                        <input type="text" name="id" value="${employee.id}" class="form-control">
                                    </div>
                                    <input type="text" name="photo" value="${employee.photo}" hidden="hidden">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">姓名</span>
                                        </div>
                                        <input type="text" name="name" value="${employee.name}" placeholder="${employee.name}" class="form-control">
                                    </div>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">年龄</span>
                                        </div>
                                        <input type="number" name="age" value="${employee.age}" placeholder="${employee.age}" class="form-control">
                                    </div>
                                    <div class="form-group" style="margin-top:5px">
                                        <select class="form-control"  name="sex">
                                            <option>${employee.sex}</option>
                                            <c:if test="${employee.sex=='女'}">
                                                <option value="男">男</option>
                                            </c:if>
                                            <c:if test="${employee.sex=='男'}">
                                                <option value="女">女</option>
                                            </c:if>
                                        </select>
                                    </div>
                                    <div class="form-group" style="margin-top: 5px">
                                        <select class="form-control"  name="department">
                                            <option value="${employee.department}">${employee.department}</option>
                                            <option value="技术部">技术部</option>
                                            <option value="人事部">人事部</option>
                                            <option value="财务部">财务部</option>
                                            <option value="后勤部">后勤部</option>
                                            <option value="市场部">市场部</option>
                                        </select>
                                    </div>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">联系方式</span>
                                        </div>
                                        <input type="text" name="phone" value="${employee.phone}" placeholder="${employee.phone}" class="form-control">
                                    </div>
                                    <button class="btn btn-primary" type="submit" style="width: 100%">修改个人信息</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-1"></div>
                    <div class="col-5">
                        <div class="card">
                            <img src="${pageContext.request.contextPath}/static/img/userbg.png" class="card-img-top" width="208px" height="90px">
                            <div class="card-body">
                                <div class="row">
                                    <img class="col-4" src="${pageContext.request.contextPath}/static/img/start.svg" width="100px" height="100px" >
                                    <div class="col-4"></div>
                                    <button class="col-3 btn btn-info" id="work" style="height: 80px;margin-left: 0%">上班打卡</button>
                                </div>
                                <div class="row">
                                    <img class="colo-4" src="${pageContext.request.contextPath}/static/img/end.svg" style="margin-left: 4%" width="100px" height="100px">
                                    <div class="col-5"></div>
                                    <button class="col-3 btn btn-success" id="off" style="height: 80px;">下班打卡</button>
                                </div>
                                <button class="btn btn-warning" style="width: 100%;margin-top: 20px" data-toggle="modal" data-target="#leave">请假</button>
                                <div id="leave" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <form action="" role="form" method="post" enctype="multipart/form-data" >
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <img src="${pageContext.request.contextPath}/static/img/edit.svg" width="48px" height="49px" >
                                                    <h3 class="modal-title">请假</h3>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">工号</span>
                                                        </div>
                                                        <input type="text" name="id" id="eid" value="${employee.id}" class="form-control">
                                                    </div>
                                                    <input type="text" name="photo" value="${employee.photo}" hidden="hidden">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">姓名</span>
                                                        </div>
                                                        <input type="text" name="name" value="${employee.name}" placeholder="${employee.name}" class="form-control">
                                                    </div>
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">请假时间</span>
                                                        </div>
                                                        <input type="date" name="leaveDate" class="form-control">
                                                    </div>
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">返工时间</span>
                                                        </div>
                                                        <input type="date" name="workDate" class="form-control">
                                                    </div>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">请假原因</span>
                                                        </div>
                                                        <textarea class="form-control"></textarea>
                                                    </div>
                                                </div>
                                                <div class="modal-body">
                                                    <button type="button" class="btn btn-warning " data-dismiss="modal">关闭</button>
                                                    <button type="submit" class="btn btn-primary" style="float: right">提交</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
</body>
<script type="module">
    let work  = $('#work');
    let eid = $('#eid').val();
    let workDate1=0,offDate=0;
    let off  = $('#off');
    $(document).ready(function (){
        $.ajax({
            url:'http://localhost:8080/IsAttendance/',
            type:'post',
            data:{
                eid:eid,
            },
            success(resp){
                if(resp!=="") {
                    if (resp.workDate !== '0') {
                        work.attr('class', 'col-3 btn btn-secondary');
                        work.text('上班已打卡');
                        work.attr('disabled', 'true');
                        off.on('click', function () {
                            offDate = new Date();
                            let offMouth = offDate.getMonth() + 1;
                            offDate = offDate.getFullYear() + "-" + offMouth + "-" + offDate.getDate() + " " + offDate.getHours() + ":" + offDate.getMinutes();
                            $.ajax({
                                url:'http://localhost:8080/updateAttendance/',
                                type:'post',
                                data:{
                                    eid:eid,
                                    offDate:offDate,
                                },
                                success(resp) {
                                    off.attr('class','col-3 btn btn-secondary');
                                    off.text('下班已打卡');
                                    off.attr('disabled','disabled');
                                    alert("下班打卡成功!");
                                }
                            })
                        })
                    }
                    if (resp.offDate !== '0') {
                        off.attr('class', 'col-3 btn btn-secondary');
                        off.text('下班已打卡');
                        off.attr('disabled', 'disabled');
                    }
                }
            }
        })
    })
    work.on('click',function (){
        workDate1 = new Date();
        let mouth = workDate1.getMonth()+1;
        let hour = workDate1.getHours();
        let minute = workDate1.getMinutes();
        if(workDate1.getMinutes()<10||workDate1.getHours()<10){
            hour = '0'+hour;
            minute = '0'+minute;
        }
        let workDate = workDate1.getFullYear()+"-"+mouth+"-"+workDate1.getDate()+" "+hour+":"+minute;
        $.ajax({
            url:'http://localhost:8080/addAttendance/',
            type:'post',
            data:{
                eid:eid,
                workDate:workDate,
                offDate:'0',
                working:'0小时'
            },
            success(resp){
                work.attr('class','col-3 btn btn-secondary');
                work.text('上班已打卡');
                work.attr('disabled','true');
                alert("上班打卡成功!");
            }
        })
    })
</script>
</html>
